<template>
  <div>
  <el-upload :http-request="httpRequest"
             action=""
             :show-file-list="false"
             list-type="picture-card"
             v-loading="loading"
             accept="image/*"
             class="
                z-clip-upload
                cursor-pointer
                relative
                overflow-hidden
                flex
                items-center
                justify-center
              ">
    <img v-if="currentValue"
         :src="currentValue"        
         :style="{ width: '80px', height: '80px' }"
         class="z-clip-upload--img" />
    <i v-else
       class="el-icon-plus z-clip-upload--icon"></i>
  </el-upload>
  </div>

</template>
<script>
import useBlob from '@/components/storybook/hooks/useBlob'
import { get } from 'lodash'
export default {
  name:'custom-form-image-upload',
  props: {
    value: {
      type: String,
      default: () => ('')
    }
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  data() {
    return {
      imageUrl: '',
      disabled: false,
      loading: false
    };
  },
  created(){

  },
  methods: {
    async httpRequest (data) {
      try {
        const file = await useBlob(data.file)
        this.loading = true;
        const paramsUpload = {
          file,
          path: 'form',
          bucket: 'app'
        }
        const { postUploadImg } = this.$interface.system
        const { data: response } = await postUploadImg(paramsUpload)
        if (response.code !== 0) {
          throw response.msg
        }
        this.loading = false;
        let src = get(response, 'data.src')
        let srcArr = src.split('/app/form')
        src = window.SITE_CONFIG['ossAddressURL'] + '/app/form' + srcArr[1]
        this.currentValue = src
        this.value = src
        this.$emit('input', this.currentValue)
      } catch (error) {
        this.loading = false;
      }
    }
  }

};
</script>
<style lang="scss" scoped>
.z-clip-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 80px;
  height: 80px;
  &--img {    
    width: 100% !important;
    height: auto !important;
  }
  &--icon {
    font-size: 28px;
    color: #8c939d;
  }
  &:hover {
    border-color: #409eff;
  }
}
</style>